<template>
<!-- 在vue2 里面需要有外层div包裹html标签代码-->
  <div class="login_container">
    <!--    搞一个div 去包裹我们的图片和form表单-->
    <div class="login_box">
      <!--   1.图片区域他也需要一个div包起来   -->
      <div class="avatar_box">
        <img src="">
      </div>
      <!--      2.form表单-->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>
<!--样式 采用less  去编译渲染-->
<style lang="less" scoped>
.login_container{
  height: 100%;
  background-color: #42b983;
}
.login_box{
  width: 450px;
  height: 380px;
  background-color: #FFFFFF;
  border-radius: 10px;//弧形边框,四个角是弧形
  position: absolute;//相对应html 第一个绝对定位
  left: 50%;
  top: 50%;
  //偏移
  transform: translate(-50%,-50%);//将相当于往左上角偏移50%
}
</style>
